<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md15">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-header">用户统计</div>
                                <div class="layui-card-body">
                                    <table id="startUp" lay-filter="startUp"></table>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-card">
                                <div class="layui-card-header">ECharts</div>
                                <div class="layui-card-body">
                                    <div id="main1" style="height:350px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-card">
                                <div class="layui-card-header">ECharts</div>
                                <div class="layui-card-body">
                                    <div id="main2" style="height:350px;"></div>
                                </div>
                            </div>
                        </div>
                        <!--                        <div class="layui-col-md12">-->
                        <!--                            <div class="layui-card">-->
                        <!--                                <div class="layui-card-header">ECharts</div>-->
                        <!--                                <div class="layui-card-body">-->
                        <!--                                    <div id="main1" style="height:350px;"></div>-->
                        <!--                                </div>-->
                        <!--                            </div>-->
                        <!--                        </div>-->
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script>
    var startInter = api.inter;
    $(document).ready(function () {
        queryUser();
    });

    //查询用户活跃数
    function queryUser() {
        $.ajax({
            type: 'post',
            url: startInter,
            data: {
                "action": "getUser",

            },
            dataType: 'json',
            success: function (res) {
                if (res.code == 0) {
                    var totalT = res.teacherTotal, activeT = res.teacherActiveCount,totalS=res.studentTotal,activeS=res.studentActiveCount;
                    var noActiveT = parseInt(totalT - activeT),noActiveS=parseInt(totalS-activeS);
                    console.log("教师活跃用户数" + activeT + "不活跃用户数" + noActiveT);
                    showEcharts(activeT, noActiveT,activeS,noActiveS);
                }
                else {
                    layer.msg(res.msg);
                }
            },
            error: function (res) {
                layer.msg("查询出错");
            }
        });
    }


    function showEcharts(activeT, noActiveT,activeS,noActiveS) {
        var totalS = activeS + noActiveS;
        var totalT = activeT + noActiveT;
        layui.config({
            base: '/src/js/'
        }).use(['jquery', 'mockjs', 'table'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                table = layui.table;

            var intervalIndex = setInterval(function () {
                if (echarts === undefined) {
                    return;
                }
                // 如果eacharts加载完成，则清除循环
                clearInterval(intervalIndex);
                //echart1
                var myChart1 = echarts.init(document.getElementById("main1"));
                var app1 = {};
                option1 = null;
                app1.title = '极坐标系下的堆叠柱状图';

                option1 = {
                    title: {
                        text: '学生用户统计:'+totalS,
                        subtext: '活跃/不活跃',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['活跃用户数', '不活跃用户数']
                    },
                    series: [{
                        name: '用户统计',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [{
                            value: noActiveS,
                            name: '不活跃用户数'
                        }, {
                            value: activeS,
                            name: '活跃用户数'
                        }],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };
                if (option1 && typeof option1 === "object") {
                    myChart1.setOption(option1, true);
                }
                // echart2
                var myChart2 = echarts.init(document.getElementById("main2"));
                var app2 = {};
                option2 = null;
                option2 = {
                    title: {
                        text: '教师用户统计:'+totalT,
                        subtext: '活跃/不活跃',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['活跃用户数', '不活跃用户数']
                    },
                    series: [{
                        name: '用户统计',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [{
                            value: noActiveT,
                            name: '不活跃用户数'
                        }, {
                            value: activeT,
                            name: '活跃用户数'
                        }],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };
                if (option2 && typeof option2 === "object") {

                    myChart2.setOption(option2, true);
                }

                $(window).on('resize', function () {
                    myChart1.resize();
                    myChart2.resize();
                });
            }, 50);

        });

    }


</script>
